<template>
  <view class="content">
    <swiper class="swiper" circular :indicator-dots="false" autoplay :interval="3000" style="height: 470rpx;">
      <swiper-item v-for="(item,index) in (baseInfo.imgUrl || [])" :key="index">
        <image :src="item.filePath" mode="" style="width: 100%;height: 100%;"></image>
      </swiper-item>
    </swiper>
    <h3 class="shop">{{baseInfo.businessName}}</h3>
    <rich-text class="rich-text" :nodes="baseInfo.businessDescription"></rich-text>
    <view class="icon-list">
      <button class="iconfont" :open-type="item==='fenxiang'?'share':''" v-for="item in iconList" :key="item"
        :class="`icon-${item}`" @tap="handleOperate(item)" />
    </view>
    <view class="data-list">
      <view class="top-sticky" @click="handleLinkTo('/pages/works/index')">
        <h2 class="block">作品 <text class="iconfont icon-you"></text></h2>
        <view class="switch">
          <view class="switch-item">全部标签</view>
          <view class="switch-item" v-for="item in tagList" :key="item.id">{{item.tagName}}</view>
        </view>
      </view>
      <works-list :works-list="worksList" :works-style="{padding: '10rpx 20rpx'}" />
    </view>
    <view class="collects" v-if="collectNum" @click="handleLinkTo('/pages/user/index')">
      <view class="num">{{collectNum}}</view>
    </view>
    <fixed-info share-url="/pages/index/index" />
  </view>
</template>

<script setup>
  import {
    ref,
    computed,
    onMounted,
    nextTick
  } from 'vue'
  import {
    onShareAppMessage
  } from '@dcloudio/uni-app'
  import {
    useStore
  } from 'vuex'
  import WorksList from '@/components/WorksList.vue'
  import host from '@/utils/ipConfig.js'
  const store = useStore()
  const title = ref('Hello')
  const iconList = ref(['tel', 'weixin', 'Creationtime', 'weizhi', 'fenxiang'])
  const tagList = computed(() => {
    return store?.getters?.getBusinessInfo?.prodLabels ?? []
  })
  const collectNum = computed(() => {
    return store.getters?.getCollectNum ?? 0
  })
  // 商家详细信息
  const baseInfo = computed(() => {
    return store?.getters?.getBusinessInfo?.baseInfoBo ?? {}
  })
  const worksList = computed(() => {
    return store?.getters?.getBusinessInfo?.prodInfoPage?.records ?? []
  })
  onShareAppMessage(() => {
    return {
      title: `${baseInfo.value.businessName}`,
      path: '/pages/index/index',
      success(res) {
        uni.showToast({
          title: '分享成功'
        })
      }
    }
  })

  const handleLinkTo = async (url) => {
    // 跳转到作品列表页
    uni.navigateTo({
      url
    })
  }
  const handleOperate = (type) => {
    const {
      businessTel,
      businessWechat,
      businessPosition
    } = baseInfo.value
    switch (type) {
      case 'tel':
        uni.makePhoneCall({
          phoneNumber: businessTel
        })
        break;
      case 'weixin':
        uni.setClipboardData({
          data: businessWechat
        })
        break;
      case 'Creationtime':
        uni.showToast({
          icon: 'none',
          title: '功能开发中...'
        })
        break;
      case 'fenxiang':
        break;
      case 'weizhi':
        const [address, lngLat] = businessPosition?.split('---&---') ?? []
        const [lng, lat] = lngLat?.split(',') ?? []
        if (lng && lat) {
          uni.openLocation({
            name: address,
            latitude: Number(lat),
            longitude: Number(lng)
          })
        } else {
          uni.showToast({
            icon: 'error',
            title: '地址信息错误，请检查配置'
          })
        }
        break;
      default: {
        break;
      }
    }
  }
</script>

<style lang="scss" scoped>
  view{
    background-color: #222;
  }
  .swiper {
    width: 750rpx;
  }

  .shop {
    color: #fff;
    font-size: 48rpx;
    font-weight: 500;
    text-align: center;
    padding: 30rpx 0;
  }

  .block {
    color: #fff;
    font-weight: 500;
    padding: 30rpx 0 30rpx 20rpx;

    text {
      font-size: 28rpx;
    }
  }

  .rich-text {
    color: #969696;
  }


  .icon-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60rpx;
    padding: 40rpx 0 70rpx;

    .iconfont {
      width: 80rpx;
      height: 80rpx;
      font-size: 38rpx;
      color: #fff;
      border-radius: 50%;
      background-color: #333;
      position: relative;
      margin: 0;

      &::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .data-list {
    height: 100vh;
    background-color: #1a1a1a;
    padding: 20rpx 0 130rpx;

    .top-sticky {
      position: sticky;

      top: 0;
    }

    .switch {
      width: 100%;
      overflow: auto;
      display: flex;
      flex-wrap: nowrap;
      padding: 20rpx 0;

      .switch-item {
        color: #969696;
        font-size: 28rpx;
        text-align: center;
        min-width: 140rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-bottom: 15rpx;
      }
    }
  }

  .collects {
    position: fixed;
    right: 20rpx;
    bottom: 200rpx;
    width: 90rpx;
    height: 90rpx;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 1);

    .num {
      width: 18px;
      height: 18px;
      line-height: 16px;
      font-size: 26rpx;
      text-align: center;
      border-radius: 50%;
      background-color: #f00;
      color: #fff;
      position: absolute;
      top: -3px;
      right: -4px;
    }

    &::before {
      content: '';
      display: block;
      width: 50rpx;
      height: 50rpx;
      background: url('../../static/collect.png') no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
